<template>
  <div class="game_wrap">
    <ul class="flex-between">
      <li
        v-for="item in gameList"
        :key="item.id"
        class="item"
        @click="routerLink(item)"
      >
        <div class="cover"></div>
        <p class="name">{{ item.name }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gameList: [],
    };
  },
  created() {
    const api = "/api/gameList";
    this.axios.get(api).then((response) => {
      this.gameList = response.data.data;
    });
  },
  methods: {
    routerLink(item) {
      if(item.url){
         window.location.href = "http://39.108.180.5/makeBigWaterMelon";
      }else if(item.id === 2){
        this.$router.push('/five_finger_chess')
      }

    },
  },
};
</script>
<style lang="less" scoped>
.game_wrap {
  width: 800px;
  margin: 0 auto;
  padding-top: 15px;
  .item {
    width: 30%;
    cursor: pointer;
    .cover {
      width: 100%;
      min-height: 150px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      background-image: url("../assets/image/water_melon.png");
      background-position: bottom;
      background-size: cover;
    }
    text-align: center;
    border-radius: 8px;
    background: #fff;
    .name {
      padding: 10px 0;
    }
  }
}
</style>